<template>
  <div class="g-ui" :style="{ top: disTop }" v-if="visible">
    <div class="g-ui-header">{{ title }}</div>
    <div class="g-ui-content">
      <ul class="content-ul">
        <li v-for="(item, index) in controlDatas" :key="index">
          <div v-if="item.label">{{ item.label }}：</div>
          <el-slider
            size="small"
            v-model="item.value"
            :min="item.min"
            :max="item.max"
            :step="item.step"
            @change="sliChange(item.name, item.value)"
            v-if="item.type == 'slider'"
          />
          <input
            type="color"
            @change="sliChange(item.name, item.value)"
            v-model="item.value"
            v-if="item.type == 'color'"
          />
        </li>
      </ul>
      <slot name="slot-table"></slot>
    </div>
    <div class="g-ui-foot">
      <el-button
        type="primary"
        v-if="btnArray[0] != '无'"
        size="default"
        @click="start"
        >{{ btnArray[0] }}</el-button
      >
      <el-button
        type="warning"
        size="default"
        v-if="btnArray[1] != '无'"
        @click="close"
        >{{ btnArray[1] }}</el-button
      >
    </div>
  </div>
</template>
<script setup>
import router from "@/router/index.js";
import { computed } from "vue";
const props = defineProps({
  title: {
    type: String,
    default: "标题",
    required: true
  },
  visible: {
    type: Boolean,
    default: true
  },
  controlDatas: { type: Object, default: () => {} },
  btnArray: { type: Array, default: ["开启", "关闭"] }
});
const emit = defineEmits(["staBtn", "cloBtn", "sliChange"]);

const start = () => {
  emit("staBtn");
};

const close = () => {
  emit("cloBtn");
};

const sliChange = (l, v) => {
  emit("sliChange", {
    l,
    v
  });
};

let disTop = computed(() => {
  if (router.currentRoute.value.path == "/example-pages/3DScene/3DSceneCut") {
    return "40px !important";
  }
});
</script>
<style lang="scss" scoped>
.g-ui {
  position: absolute;
  top: 0;
  right: 0;
  width: 350px;
  margin: 10px;
  border-radius: 5px;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
  opacity: 0.8;
  z-index: 10;
  .g-ui-header {
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    border: 1px solid #accbee;
    text-align: center;
    color: rgb(11, 2, 2);
  }
  .g-ui-content {
    width: 100%;
    height: calc(100% - 70px);
    .content-ul {
      li {
        padding: 0 10px;
        border-bottom: 3px solid lightblue;
      }
    }
  }
  .g-ui-foot {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
}
</style>
<style>
.el-slider__button {
  width: 15px;
  height: 15px;
}
</style>
